<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>v-model双向绑定</title>
  </head>

  <body>
    <div id="app">
    <!-- 重点是：双向绑定：表单变了，message属性的值也跟着变。 -->
    <!-- 无论修改谁，另一个就会同步更新。 -->
    
      <input type="text" v-model="message" @keyup.enter="getM"> <!-- 回车后显示message -->
      <h3>message的值为： {{message}}</h3>
      <hr/>
      <input type="button" value="修改message值" @click="changeM">

    </div>


    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>


    <script>
      new Vue({
        el: "#app",
        data:{
          message:"一条message"

        },
        methods: {
          changeM:function(){
            this.message="我是新的message";
          },
          getM:function(){
            alert(this.message);
          }
        






          
        },


      })
    </script>

    <!-- data是这个Vue实例中使用到的数据。用什么就写什么 -->
  </body>
</html>
